<extend name="Public/base"/>
<block name="sidebar">
    <include file="sidemenu"/>
</block>
<block name="body">
    <script type="text/javascript" src="__STATIC__/uploadify/jquery.uploadify.min.js"></script>
    <link rel="stylesheet" type="text/css" href="__STATIC__/seatchart/jquery.seat-charts.css">
    <link rel="stylesheet" type="text/css" href="__STATIC__/seatchart/seat.style.css">
    <script src="__STATIC__/jquery-2.0.3.min.js"></script>
    <script src="__STATIC__/seatchart/jquery.seat-charts.js"></script>
    <div class="main-title">
        <h2>{:isset($info['id'])?'编辑':'新增'}分区</h2>
    </div>
    <div class="tab-wrap">
        <ul class="tab-nav nav">
            <li data-tab="tab1" class="current"><a href="javascript:void(0);">基 础</a></li>
        </ul>
        <div class="tab-content">
            <form action="" method="post" class="form-horizontal">
                <!-- 基础 -->
                <div id="tab1" class="tab-pane in tab1">
                    <div class="form-item">
                        <label class="item-label">
                            分区名称<span class="check-tips">（名称不能为空）</span>
                        </label>
                        <div class="controls">
                            <input type="text" name="name" required class="text input-large" value="{$info.name|default=''}">
                        </div>
                    </div>
                    <div class="form-item">
                        <label class="item-label">
                            舞台<span class="check-tips"></span>
                        </label>
                        <div class="controls">
                            <input type="text" readonly class="text input-large" value="{$stage.name|default=''}">
                        </div>
                    </div>
                    <input type="text" id="mark" hidden readonly name="mark" class="text input-large" value="{$info.mark|default='a'}">
                    <div class="form-item">
                        <label class="item-label">
                            颜色<span class="check-tips">(仅用于前台显示)</span>
                        </label>
                        <div class="controls">
                            <select name="color" id="color" class="input-large">
                                <option <eq name="info['color']" value="blue">selected="selected"</eq> value="blue">蓝色</option>
                                <option <eq name="info['color']" value="yellow">selected="selected"</eq> value="yellow">黄色</option>
                                <option <eq name="info['color']" value="red">selected="selected"</eq> value="red">红色</option>
                                <option <eq name="info['color']" value="green">selected="selected"</eq> value="green">绿色</option>
                                <option <eq name="info['color']" value="purple">selected="selected"</eq> value="purple">紫色</option>
                                <option <eq name="info['color']" value="pink">selected="selected"</eq> value="pink">粉色</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-item">
                        <label class="item-label">
                            价格<span class="check-tips"></span>
                        </label>
                        <div class="controls">
                            <input type="text" name="price" class="text input-large" value="{$info.price}">
                        </div>
                    </div>
                    <div class="form-item">
                        <label class="item-label">
                            观众席大小<span class="check-tips">(座x排)</span>
                        </label>
                        <div class="controls">
                            <input type="text" readonly class="text input-small" id="size" name="size" value="{$stage.size}">
                        </div>
                    </div>
                    <div class="form-item">
                        <label class="item-label">
                            舞台视图<span class="check-tips"></span>
                        </label>
                        <div class="controls">
                            <div id="map">
                                <div id="seat-map">
                                    <div class="front">{$stage.front}</div>
                                </div>
                                <div id="booking-details" class="booking-details">
                                    <h2>设置分区座位</h2>
                                    <p>座位：</p>
                                    <ul id="selected-seats"></ul>
                                    <p>数量：<span id="counter">0</span></p>
                                    <a class="btn btn-primary" id="cof-btn" onclick="cofm()">确定分区</a>
                                    <div id="legend"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="form-item">
                    <input type="hidden" name="id" value="{$info.id}">
                    <input type="hidden" name="pid" value="{$stage.id}">
                    <input type="hidden" id="seats" name="seats" value="{$stage.seats}">
                    <button type="submit" id="submit" disabled="disabled" class="btn submit-btn ajax-post"
                            target-form="form-horizontal">确 定
                    </button>
                    <button class="btn btn-return" onclick="javascript:history.back(-1);return false;">返 回</button>
                </div>
            </form>
        </div>
    </div>
</block>

<block name="script">
    <script type="text/javascript">
        var seatLabel = 1;
        var sc;
        var frontName = "{$stage.front}";
        $(document).ready(function () {
            var maps = setMap();
            var cart = $('#selected-seats');
            var counter = $('#counter');
            var total = $('#total');
            var last = 0;
            sc = $('#seat-map').seatCharts({
                map: maps,
                seats: {
                    a: {
                        price: 0,
                        classes: 'first-class', //your custom CSS class
                        category: '头等舱'
                    }
                },
                naming: {
                    top: false,
                    getLabel: function (character, row, column) {
                        if (last != row) {
                            last = row;
                            seatLabel = 1;
                        }
                        if (character != '_') {
                            return seatLabel++;
                        } else {
                            return 0;
                        }
                    }
                },
                click: function () {
                    if (this.status() == 'available') {
                        $('<li>' + (this.settings.row + 1) + '排' + this.settings.label + '座<a href="#" class="cancel-cart-item">&times;</a></li>')
                                .attr('id', 'cart-item-' + this.settings.id)
                                .data('seatId', this.settings.id)
                                .appendTo(cart);
//						this.character = '';
                        counter.text(sc.find('selected').length + 1);
                        total.text(recalculateTotal(sc) + this.data().price);
                        return 'selected';
                    } else if (this.status() == 'selected') {
                        //update the counter
                        counter.text(sc.find('selected').length - 1);
                        //and total
                        total.text(recalculateTotal(sc) - this.data().price);
                        //remove the item from our cart
                        $('#cart-item-' + this.settings.id).remove();
                        //seat has been vacated
                        return 'available';
                    } else if (this.status() == 'unavailable') {
                        //seat has been already booked
                        return 'unavailable';
                    } else {
                        return this.style();
                    }
                }
            });
//            setInterval(function () {
//                $.ajax({
//                    type: 'get',
//                    url: '/bookings/get/100',
//                    dataType: 'json',
//                    success: function (response) {
//                        //iterate through all bookings for our event
//                        $.each(response.bookings, function (index, booking) {
//                            //find seat by id and set its status to unavailable
//                            sc.status(booking.seat_id, 'unavailable');
//                        });
//                    }
//                });
//            }, 10000); //every 10 seconds
            //this will handle "[cancel]" link clicks
            $('#selected-seats').on('click', '.cancel-cart-item', function () {
                //let's just trigger Click event on the appropriate seat, so we don't have to repeat the logic here
                sc.get($(this).parents('li:first').data('seatId')).click();
            });

            //let's pretend some seats have already been booked
            //sc.get(['1_2', '4_1', '7_1', '7_2']).status('unavailable');
        });
        function recalculateTotal(sc) {
            var total = 0;
            //basically find every selected seat and sum its price
            sc.find('selected').each(function () {
                total += this.data().price;
            });
            $('#submit').attr('disabled', true);
            return total;
        }
        function setMap() {
            var str = "{$stage['seats']}";
            var map = str.split(",");
            return map;
        }

        function cofm() {
            var mark = $('#mark').val();
            var Regx = /^[A-Za-z]*$/;
            if (mark.length != 1 || !Regx.test(mark)) {
                alert('请使用一个英文字母!');
                return;
            }
            var seats = $('.seatCharts-cell');
            var tmp = {$stage['size']|substr=0,2};
            var mwith = tmp + 2;
            var ss = "";
            seats.each(function (index) {
                if ((index + 1) % mwith != 1) {
                    if ($(this).hasClass('seatCharts-space')) {
                        ss += '_';
                    } else if ($(this).hasClass('selected')) {
                        ss += mark;
                    } else {
                        ss += sc.get($(this).attr("id")).settings.character;
                    }
                }
                if ((index + 1) % mwith == 0 && (index+1) != seats.length) {
                    ss += ','
                }
            });
            console.log(ss);
//            rebuilt(ss);
            $('#seats').val(ss);
            $('#submit').attr('disabled', false);
        }

        function rebuilt(map) {
            $('#seat-map').remove();
            $('#booking-details').remove();
            $('#map').append("<div id='seat-map'><div class='front'>" + frontName + "</div></div><div id='booking-details' class='booking-details'> <h2>设置分区座位</h2> <p>座位：</p> <ul id='selected-seats'></ul> <p>数量：<span id='counter'>0</span></p> <a class='btn btn-primary' id='cof-btn' onclick='cofm()'>确定分区</a><div id='legend'></div></div>");
            var maps = map.split(',');
            var cart = $('#selected-seats');
            var counter = $('#counter');
            var total = $('#total');
            var sc = $('#seat-map').seatCharts({
                map: maps,
                seats: {
                    a: {
                        price: 100,
                        classes: 'first-class', //your custom CSS class
                        category: '头等舱'
                    }
                },
                naming: {
                    top: false,
                    getLabel: function (character, row, column) {
                        if (column == 1) {
                            firstSeatLabel = 1;
                        }
                        return firstSeatLabel++;
                    }
                },
                click: function () {
                    if (this.status() == 'available') {
                        $('<li>' + (this.settings.row + 1) + '排' + this.settings.label + '座<a href="#" class="cancel-cart-item">&times;</a></li>')
                                .attr('id', 'cart-item-' + this.settings.id)
                                .data('seatId', this.settings.id)
                                .appendTo(cart);
                        counter.text(sc.find('selected').length + 1);
                        total.text(recalculateTotal(sc) + this.data().price);
                        return 'selected';
                    } else if (this.status() == 'selected') {
                        //update the counter
                        counter.text(sc.find('selected').length - 1);
                        //and total
                        total.text(recalculateTotal(sc) - this.data().price);
                        //remove the item from our cart
                        $('#cart-item-' + this.settings.id).remove();
                        //seat has been vacated
                        return 'available';
                    } else if (this.status() == 'unavailable') {
                        //seat has been already booked
                        return 'unavailable';
                    } else {
                        return this.style();
                    }
                }
            })
        }
        //导航高亮
        highlight_subnav("{:U('Stage/index')}");
    </script>
</block>
